<template>
  <div class="earth-container">
    <EarthIcon ref="svgRef" class="earth-svg" />

    <!-- 弹窗（Teleport 到 body） -->
<teleport to="body">
  <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
    <div class="modal-content">
      <component :is="currentComponent" />
      <button class="close-btn" @click="closeModal">关闭</button>
    </div>
  </div>
</teleport>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, shallowRef, nextTick } from 'vue';
// import EarthIcon from '../../assets/mountain.svg';
import EarthIcon from '../../assets/Belt/MainFort.svg';
import { applyAnimations, clearAllAnimations } from '../animationManager';

// svg 元素引用
const svgRef = ref<InstanceType<typeof EarthIcon>>()

// 接收属性
const props = defineProps({
  runEarth: { type: Boolean, default: true },
  speed: { type: Number, default: 0 }
})

// 弹窗状态与组件控制
const showModal = ref(false)
const currentComponent = shallowRef(null)

// 打开弹窗，并动态加载目标组件
const openModal = async (componentName: string) => {
  try {
    showModal.value = true; // 先触发弹窗显示
    
    // 等待弹窗 DOM 更新和布局稳定
    await nextTick();
    await new Promise(resolve => setTimeout(resolve, 0)); // 插入微任务队列间隙
    
    // 动态加载组件
    const module = await import(`../windows/${componentName}.vue`);
    currentComponent.value = module.default;

    // 添加额外延迟确保动画完成（根据实际动画时长调整）
    setTimeout(() => {
      const threeComp = currentComponent.value as any;
      threeComp?.forceResize?.();
    }, 300); // 对应 scaleUp 动画的 0.3s 时长
  } catch (err) {
    console.error('组件加载失败:', err);
    showModal.value = false;
  }
}

// 关闭弹窗
const closeModal = () => {
  showModal.value = false
  currentComponent.value = null
}

// 初始化
onMounted(() => {
  const svg = svgRef.value!.$el as SVGSVGElement;

  svg.addEventListener('click', (event: MouseEvent) => {
    const target = event.target as SVGElement;

    // 忽略点击 svg 空白区域本体
    if (target === svg) {
      return; // 点到空白处，不做任何操作
    }

    console.log('点击了具体图形元素:', target.tagName);
    // openModal('CanvasThreemountan');
  });

  // 自转动画
  applyAnimations(svg, props.runEarth);
  
  let last = 0, rot = 0;
  const step = (t: number) => {
    if (props.runEarth) {
      const dt = t - last;
      rot = (rot + dt * props.speed * 0.036) % 360;
      svg.style.transform = `rotate(${rot}deg)`;
    }
    last = t;
    requestAnimationFrame(step);
  };
  requestAnimationFrame(step);
});

watch(() => props.runEarth, (newVal) => {
  const svg = svgRef.value!.$el as SVGSVGElement;
  newVal ? applyAnimations(svg, true) : clearAllAnimations(svg);
});
</script>

<style scoped>
.earth-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  position: relative; /* 新增定位上下文 */
}

.earth-svg {
  transform-origin: center;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  backdrop-filter: blur(5px); /* 毛玻璃效果 */
  animation: fadeIn 0.3s ease;
}

.modal-content {
  position: relative;
  width: 50vw;      /* 视口宽度的50% */
  height: 50vh;     /* 视口高度的50% */
  min-width: 300px; /* 最小尺寸限制 */
  min-height: 300px;
  background: linear-gradient(145deg, #d19851, #f8f5f2);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  padding: 24px;
  display: flex;
  flex-direction: column;
  animation: scaleUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
  position: absolute; /* 改为绝对定位避免父级影响 */
  contain: strict;    /* 启用contain严格模式 */
  box-sizing: border-box; /* 确保padding不影响尺寸计算 */
  
}

.close-btn {
  align-self: flex-end;
  padding: 8px 20px;
  background: #4a90e2;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: auto; /* 自动顶部外边距将按钮推到底部 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.close-btn:hover {
  background: #357abd;
  transform: translateY(-1px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}
.module {
  pointer-events: none; /* 禁用容器响应，让 SVG 自己决定 */
}
.module svg {
  pointer-events: visiblePainted; /* 只让图形响应 */
}
/* 动画效果 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleUp {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .modal-content {
    width: 80vw;
    height: 60vh;
    z-index: 9999; /* 永远最高 */
  }
}
</style>
